<template>
  <div class="amtf 隐藏鼠标 fixed">
    <div class="image-container">
      <div class="image-bg"></div>
      <img class="无界 image-src " src="@/amtf/assets/amtf-无量寿透明.png" alt="amtf图片不见了" @click="添加涟漪"
        @mousemove="鼠标移动">
    </div>
  </div>
</template>

<script setup>
import { 添加涟漪 } from '@/amtf/utils/涟漪';
let throttleTimeout;
function 鼠标移动(e) {
  // 添加涟漪(e)
  // 清除之前设置的定时器，确保不会在短时间内连续触发
  clearTimeout(throttleTimeout);
  // 设置新的定时器，0.2秒后执行处理函数
  throttleTimeout = setTimeout(function () {
    添加涟漪(e)
  }, 12); // 200毫秒 = 0.2秒
}
</script>
<style lang="scss" scoped>
.amtf {
  z-index: 100;
  left: calc(50% + 200px);
  top: 30%;
  transform: translateY(-50%);
}
.image-src,
.image-bg {
  max-height: 480px;
}

.image-src {
  transition: transform .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);

  &:hover {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@media (min-width: 640px) {
  .image {
    margin: -108px -24px -48px;
  }
}

@media (min-width: 960px) {
  .image {
    flex-grow: 1;
    order: 2;
    margin: 0;
    min-height: 100%;
  }
}

.image-container {
  position: relative;
  margin: 0 auto;
  width: 380px;
  height: 380px;
}

@media (min-width: 640px) {
  .image-container {
    width: 380px;
    height: 380px;
  }
}

@media (min-width: 960px) {
  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 380px;
    height: 380px;
    /*rtl:ignore*/
    transform: translate(0px, 64px);
  }
}

.image-bg {
  position: absolute;
  top: 50%;
  /*rtl:ignore*/
  left: 50%;
  border-radius: 50%;
  width: 192px;
  height: 192px;
  background-image: var(--vp-home-hero-image-background-image);
  filter: var(--vp-home-hero-image-filter);
  /*rtl:ignore*/
  transform: translate(-50%, -50%);
}

@media (min-width: 640px) {
  .image-bg {
    width: 256px;
    height: 256px;
  }
}

@media (min-width: 960px) {
  .image-bg {
    width: 320px;
    height: 320px;
  }
}

:deep(.image-src) {
  position: absolute;
  top: 50%;
  /*rtl:ignore*/
  left: 50%;
  max-width: 192px;
  max-height: 192px;
  /*rtl:ignore*/
  transform: translate(-50%, -50%);
}

@media (min-width: 640px) {
  :deep(.image-src) {
    max-width: 320px;
    max-height: 320px;
  }
}

@media (min-width: 960px) {
  :deep(.image-src) {
    max-width: 480px;
    max-height: 480px;
  }
}
</style>
